import React, {Component} from 'react';
import {Center, Image, View} from "native-base";
import {Platform, TouchableHighlight,StyleSheet} from "react-native";

class SectImg extends Component {
    constructor(props) {
        super(props);
        this.state={
            introduce:props.msg.introduce,
            photo:props.msg.photo
        }
    }
    getSnapshotBeforeUpdate(prevProps, prevState) {
        //判断收索的内容是否改变，改变返回true
        console.log('img',prevProps)
        if(prevProps.num !== this.props.num){
            return true;
        }
        return false;
    }
    componentDidUpdate(prevProps, prevState, snapshot) {
        if(snapshot){
            console.log('img改变啦')
            const {introduce, photo} = prevProps.msg;
            this.setState({
                introduce,
                photo
            })
        }
    }
    render() {
        return (
            <View style={styles.vessels}>
                <View style={styles.imgContent}>
                    <TouchableHighlight  style={styles.imgVessels} onPress={() => {this.props.navigation.navigate('AncientShow',{...this.props,img:this.state.photo1})}}>
                        <Image style={styles.img} source={{
                            uri: (Platform.OS==='android'||(Platform.Os==="iOS"&&Platform.Version>14))
                                ?`${this.state.photo}?imageView2/0/format/webp/interlace/1/q/1`
                                :`${this.state.photo}`,isStatic: true
                        }} resizeMode="contain" fallbackSource={require('../../assets/error.webp')} alt="123" size="2xl" resizeMethod="resize"
                        />
                    </TouchableHighlight >
                </View>
                <Center _text={{fontSize:18}}>{this.state.introduce}</Center>
                {/*<Center _text={{color:'#c4c4c4',fontSize:12}}>{this.state.laiyuan}</Center>*/}
            </View>
        );
    }
}

export default SectImg;

const styles=StyleSheet.create({
    vessels:{
        width:'100%',
        height:'100%'
    },
    imgContent:{
        width:'100%',
        height:150,
        backgroundColor: "#fff",
        borderBottomWidth:2,
        paddingBottom:10,
        borderColor:'#f8f8f8'
    },
    imgVessels:{
        backgroundColor:'#fff',
        borderRadius: 3,
    },
    img:{
        width:'100%',
        height:'100%',
    }
})